<template>
  <div class="talks_item">
    <div class="talks_item_avatar">
      <el-avatar
        class="avatar-animate"
        :size="50"
        :src="props.talksItem.avatar"
        v-if="props.talksItem.avatar !== null"
      ></el-avatar>
      <el-avatar v-else>默认</el-avatar>
    </div>
    <div class="talks_item_info">
      <ul>
        <li>
          <i>{{ props.talksItem.author }}</i>
        </li>
        <li>
          {{ formatUtcTime(props.talksItem.createAt) }}
          <i>评论数{{ props.talksItem.commentCount }}</i>
        </li>
        <li
          v-html="
            props.talksItem.content.replace(
              /\#[\u4E00-\u9FA5]{1,3}\;/gi,
              formatEmoji
            )
          "
        ></li>
      </ul>
    </div>
  </div>
</template>

<script setup>
  import formatUtcTime from '@/utils/formatTime'
  import formatEmoji from '@/utils/formatEmoji'
  const props = defineProps({
    talksItem: {
      type: Object,
      default: () => {},
    },
  })
</script>

<style lang="less" scoped>
  .talks_item {
    display: flex;
    width: 100%;
    padding: 32px;
    margin-bottom: 20px;
    background-color: var(--background-secondary);
    border-radius: 16px;
    transition: transform 0.2s ease-in-out;
    &:hover {
      transform: scale(1.015);
    }
    .talks_item_avatar {
      width: 40px;
      height: 40px;
      margin-right: 8px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        transition-property: transform;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 0.8s;
        &:hover {
          transform: rotate(1turn);
        }
      }
    }
    .talks_item_info {
      flex: 1;
      ul {
        li {
          &:nth-child(1) {
            font-weight: 530;
            font-size: 14px;
            line-height: 20px;
          }
          &:nth-child(2) {
            margin-top: 4px;
            color: #999;
            font-size: 13px;
          }
          &:nth-child(3) {
            margin-top: 10px;
            font-size: 14px;
            line-height: 26px;
            white-space: pre-line;
            word-wrap: break-word;
            word-break: break-all;
          }
        }
      }
    }
  }
  @media only screen and (max-width: 990px) {
    .talks_item {
      padding: 20px 12px;
    }
  }
</style>
